<!-- 更多功能的操作栏-弹窗组件 -->
<template>
  <div>
    <div class="dialog-box" v-if="dialogVisible">
      <div class="bgc" @click="handleCloseDialog"></div>
      <div class="content">
        <div class="meun-list">
          <div
            class="meun-list-item"
            :class="{ 'meun-list-item-active': meunActiveIndex === index }"
            @click="handleSelect(index)"
            v-for="(item, index) in meunList"
            :key="item.name"
          >
            <img class="image" v-if="meunActiveIndex === index" :src="item.activeImage" alt="" />
            <img class="image" v-else :src="item.image" alt="" />
            <div class="desc">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改服务费的弹窗组件 -->
    <EditServiceChargeDialog
      v-model="isShowEditServiceChargeDialog"
      :deskDetail="currentDeskDetail"
      @success="onSuccess"
    />
    <!-- 不打折金额的弹窗组件 -->
    <NotDiscountMoneyDialog
      v-model="isShowNotDiscountMoneyDialog"
      :deskDetail="currentDeskDetail"
      @success="onSuccess"
    />
    <!-- 卡券管理的弹窗 -->
    <CouponManagementDialog
      v-model="isShowCouponManagementDialog"
      :deskDetail="currentDeskDetail"
      @success="onSuccess"
    />
    <!-- 多台开席的弹窗组件 -->
    <MulOpeningDesktopDialog
      actionType="adjust"
      :isShowType="false"
      v-model="isShowMulOpeningDesktopDialog"
      :deskDetail="currentDeskDetail"
      @success="onSuccess"
    />
    <!-- 拆分账单 -->
    <SplitBillDialog v-model="isShowSplitBillDialog" @success="onSuccess" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { deskLockDesk } from '@/api/desktop'
import MessageTips from '@/components/messageTips'
// 不需要导入store，使用props传递数据
import EditServiceChargeDialog from './EditServiceChargeDialog.vue'
import NotDiscountMoneyDialog from './NotDiscountMoneyDialog.vue'
import CouponManagementDialog from './CouponManagementDialog.vue'
import SplitBillDialog from './SplitBillDialog.vue'
import MulOpeningDesktopDialog from './MulOpeningDesktopDialog.vue'

interface Props {
  modelValue: boolean
  deskDetail?: any
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  deskDetail: null
})

const emit = defineEmits<Emits>()

// 对话框显示状态
const dialogVisible = computed({
  get: () => props.modelValue,
  set: val => emit('update:modelValue', val)
})

// 当前桌台详情
const currentDeskDetail = computed(() => props.deskDetail)

// 操作菜单列表
const meunList = ref([
  {
    name: '修改服务费',
    image: new URL('@/assets/images/home/xiugaifuwufeilv.png', import.meta.url).href,
    activeImage: new URL('@/assets/images/home/xiugaifuwufeilv-s.png', import.meta.url).href
  },
  {
    name: '卡券管理',
    image: new URL('@/assets/images/home/kaquanguanli.png', import.meta.url).href,
    activeImage: new URL('@/assets/images/home/kaquanguanli-s.png', import.meta.url).href
  },
  {
    name: '不打折金额',
    image: new URL('@/assets/images/home/budazhejine.png', import.meta.url).href,
    activeImage: new URL('@/assets/images/home/budazhejine-s.png', import.meta.url).href
  },
  {
    name: '桌台锁定',
    image: new URL('@/assets/images/home/zhuotaisuoding.png', import.meta.url).href,
    activeImage: new URL('@/assets/images/home/zhuotaisuoding-s.png', import.meta.url).href
  },
  {
    name: '多台开席调整',
    image: new URL('@/assets/images/home/duotaikaixitiaozheng.png', import.meta.url).href,
    activeImage: new URL('@/assets/images/home/duotaikaixitiaozheng-s.png', import.meta.url).href
  }
])

// 选中菜单的对应索引
const meunActiveIndex = ref(-1)

// 是否显示修改服务费的弹窗
const isShowEditServiceChargeDialog = ref(false)

// 是否显示不打折金额的弹窗
const isShowNotDiscountMoneyDialog = ref(false)

// 是否显示卡券管理的弹窗
const isShowCouponManagementDialog = ref(false)

// 是否显示多席开台的弹窗
const isShowMulOpeningDesktopDialog = ref(false)

// 是否显示拆分账单的弹窗
const isShowSplitBillDialog = ref(false)

// 监听对话框打开状态
watch(
  () => dialogVisible.value,
  val => {
    if (val) {
      meunList.value[3].name =
        currentDeskDetail.value?.is_lock?.value === 1 ? '桌台解锁' : '桌台锁定'
    }
  }
)

// 成功关闭弹窗
const onSuccess = () => {
  emit('update:modelValue', false)
  emit('success')
}

// 选中对应的菜单
const handleSelect = async (index: number) => {
  // 打开多席开台弹窗组件
  if (index === 4) {
    if (currentDeskDetail.value.open_type.value !== 50) {
      ElMessage.warning('多台开席的桌台才能可以使用该功能')
      return
    }
    isShowMulOpeningDesktopDialog.value = true
  }
  meunActiveIndex.value = index
  // 关闭当前组件弹窗
  handleCloseDialog()
  // 打开修改服务费的弹窗
  if (index === 0) {
    isShowEditServiceChargeDialog.value = true
    return
  }

  if (index === 1) {
    isShowCouponManagementDialog.value = true
    return
  }
  // 不打折金额
  if (index === 2) {
    isShowNotDiscountMoneyDialog.value = true
    return
  }
  // 锁台/解锁桌台
  if (index === 3) {
    const isLocked = currentDeskDetail.value?.is_lock?.value === 1
    const title = isLocked ? '解锁桌台' : '锁定桌台'

    // 获取桌台名称，尝试多种可能的路径
    const deskName =
      currentDeskDetail.value?.desk_name ||
      currentDeskDetail.value?.recordInfo?.desk_name ||
      currentDeskDetail.value?.name ||
      '未知桌台'

    const content = isLocked ? `确定要解锁桌台 ${deskName} 吗？` : `确定要锁定桌台 ${deskName} 吗？`

    // 使用MessageTips组件显示确认弹窗
    const messageTipsInstance = await MessageTips.message(
      {
        title,
        content,
        isOnCancel: true,
        onCancelText: '取消',
        onSumbitText: '确定'
      },
      async () => {
        // 确认操作
        try {
          // 设置加载状态
          messageTipsInstance.setLoading(true)

          const datas = {
            record_id: currentDeskDetail.value.id
          }

          const res = await deskLockDesk(datas)
          if (res.status === 200) {
            ElMessage.success('操作成功')
            // 通知父组件刷新数据
            emit('success')
            // 关闭弹窗
            messageTipsInstance.close()
          } else {
            ElMessage.error('操作失败')
            messageTipsInstance.setLoading(false)
          }
        } catch (error) {
          console.error('锁定/解锁桌台失败:', error)
          ElMessage.error('操作失败')
          messageTipsInstance.setLoading(false)
        }
      }
    )
  }
}

// 关闭弹窗
const handleCloseDialog = () => {
  meunActiveIndex.value = -1
  emit('update:modelValue', false)
}
</script>

<style scoped lang="scss">
.bgc {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.content {
  position: fixed;
  left: 0;
  top: 80px;
  bottom: 0px;
  z-index: 100;
  width: 220px;
  height: 900px;
  background: #ffffff;
  border-radius: 0px 20px 20px 0px;
  padding: 60px 30px;
  box-sizing: border-box;
  .meun-list {
    height: 820px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .meun-list-item {
      display: flex;
      align-items: center;
      width: 160px;
      height: 70px;
      background: #ffffff;
      border: 1px solid #707070;
      border-radius: 12px;
      box-sizing: border-box;
      padding-left: 10px;
      color: #333333;
      cursor: pointer;
      .image {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        margin-right: 10px;
      }
      .desc {
        font-size: 14px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        font-weight: 700;
      }
    }
    .meun-list-item-active {
      border-color: #7c0a03;
      color: #7c0a03;
    }
  }
}
</style>
